<template>
  <a-table :columns="tableColumn" :pagination="false" :data-source="tableData" bordered>
    <template #rate="{record,index}">
      <span v-if="activeKey !== index">{{ record.rate }}%</span>
      <a-input v-else v-model:value="record.rate" style="width:150px">
        <template #addonAfter>
          %
        </template>
      </a-input>
    </template>
  </a-table>
</template>

<script>
import {onMounted, ref, createVNode} from "vue";
import locale from "@/locale";
import {useRoute} from "vue-router";
import {Button, message} from "ant-design-vue"

const {t} = locale.global;
import {getOrderDetails,updateOrder} from "@/api/order"


export default {
  name: "index",
  setup() {
    const tableData = ref([])
    const route = useRoute()
    const {t} = locale.global
    const {loanRecordId} = route.query
    const activeKey = ref(null)
    const loanDetails = ref({})
    async function getDetails() {
      const res = await getOrderDetails({
        loanRecordId
      })
      if (res.code === 1) {
        const data = res.data
        loanDetails.value = data
        tableData.value = [
          {
            title: t('保证金'),
            rate: data.paymentFee,
            amount: data.paymentAmount,
            isUpdate: data.updateFee === 3,
            prop: 'paymentFee'
          },
          {title: t('解冻费'), rate: data.thawFee, amount: data.thawAmount, isUpdate: data.updateFee === 4, prop: 'thawFee'},
          {
            title: t('事故处理费'),
            rate: data.accidentFee,
            amount: data.accidentAmount,
            isUpdate: data.updateFee === 5,
            prop: 'accidentFee'
          },
          {
            title: t('插队费')  + '1',
            rate: data.aheadFee,
            amount: data.aheadAmount,
            isUpdate: data.updateFee === 6,
            prop: 'aheadFee'
          },
          {
            title: t('插队费') + '2',
            rate: data.aheadFee2,
            amount: data.aheadAmount2,
            isUpdate: data.updateFee === 7,
            prop: 'aheadFee2'
          },
          {
            title: t('插队费') + '3',
            rate: data.aheadFee3,
            amount: data.aheadAmount3,
            isUpdate: data.updateFee === 8,
            prop: 'aheadFee3'
          },
        ]
      }

    }

    const tableColumn = [
      {title: t('费用名称'), dataIndex: 'title', align: 'center'},
      {title: t('缴扣比例'), dataIndex: 'rate', align: 'center', slots: {customRender: 'rate',}},
      {title: t('缴扣金额'), dataIndex: 'amount', align: 'center', },
      {
        title: t('操作'), dataIndex: 'isUpdate', align: 'center', customRender: ({text, record, index}) => {
          if (text) {
            if (activeKey.value === index) {
              return createVNode(Button, {
                type: 'link',
                onClick: async () => {
                  const params = {
                    loanRecordId
                  }
                  params[record.prop] = record.rate
                  const res = await updateOrder(params)
                  if (res.code === 1) {
                    activeKey.value = null
                    message.success(t('保存成功'))
                    getDetails()
                  }
                }
              }, t('保存'))
            } else {
              return createVNode(Button, {
                type: 'link',
                onClick: () => {
                  activeKey.value = index
                }
              }, t('编辑'))
            }
          }
        }
      },
    ]

    onMounted(() => {
      getDetails()
    })
    return {
      activeKey,
      loanDetails,
      tableColumn,
      tableData
    }
  }
}
</script>

<style scoped>

</style>
